<template>
  <div>
    <p class="title">添加图书</p>
    <el-form ref="formRef" :model="form" label-width="120px">
      <el-form-item label="图书名称">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="图书定价">
        <el-input v-model="form.price"></el-input>
      </el-form-item>
      <el-form-item label="出版单位">
        <el-input v-model="form.publisher"></el-input>
      </el-form-item>
      <el-form-item label="出版时间">
        <el-date-picker v-model="form.pubDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD" ></el-date-picker>
      </el-form-item>
      <el-form-item label="图书作者">
        <el-input v-model="form.author"></el-input>
      </el-form-item>
    </el-form>
    <el-row justify="end">
      <el-col :span="4" >
        <el-button type="primary" @click="submit">添加</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    name: 'BookAdd' ,
    methods: {
      submit(){
        let params = { ...this.form };
        this.axios.post( '/book/add' , params )
                  .then( response => {
                    let { success , message } = response.data ;
                    alert( message );
                    if( success ) {
                      // 编程式导航
                      this.$router.push( { name: 'bookList' } );
                    }
                  }).catch( error => {
                    console.log( error );
                  });
      }
    }
}
</script>

<script setup>
import { reactive } from 'vue' ;

const form = reactive({
  name: '' ,
  price: '' ,
  publisher: '' ,
  pubDate: '' ,
  author: '' 
});
</script>

<style scoped>
.title {
  text-align: center ;
  font-weight: bold ;
  letter-spacing: 0.5em ;
}
</style>